<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="${request.contextPath}/resources/image/desktop_logo-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${request.contextPath}/resources/image/desktop_logo-72.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${request.contextPath}/resources/image/desktop_logo-114.png">
    <title>100%喜帖</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/style.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/mhsc.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/payAndShare.css">
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body style="background: url(${request.contextPath}/resources/image/template_bg.jpg) #fff; background-attachment: fixed;">
<!-- Modal -->
<div class="modal fade" id="focusesUs" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 2rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <h4 style="text-align: center; color: #ff3261">公众号：百分百喜帖</h4>
                        <img src="${request.contextPath}/resources/image/2weima.png">
                        <h3 style="text-align: center; color: #ff3261; margin-top: 1rem;">长按关注我们</h3>
                        <ul class="list-unstyled">
                            <li style="text-align: center; color: #ff3261;">制作属于自己的结婚请柬</li>
                            <li style="text-align: center; color: #ff3261;">www.100hunqing.cn</li>
                        </ul>
                        <p class="text-center"><img src="${request.contextPath}/resources/image/login_small.png"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="share-card-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 1rem;">
        <div class="modal-content" style="border-radius:20px;">
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="fenxiang_layout">
                            <div class="fenxiang_header">
                                <h4>如何分享 SHARE</h4>
                            </div>
                            <form style="margin-top: 30px" class="login-form">

                                <div align="center">
                                    <img width="100%" src="${request.contextPath}/resources/image/fenxiangyindao.png"/>
                                </div>
                                <div style="margin: 20px auto;width: 165px;">
                                    <button type="submit" class="login_btn" data-dismiss="modal" id="okBtn">知道了</button>
                                </div>
                                <div class="login_span"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--pay&share modal start-->
<div class="modal fade" id="shareInfor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 1rem;">
        <div class="modal-content" style="border-radius:20px;">
        	<div class="modal-header" style="border: none; padding-bottom: 0;">
        		<img width="100%" src="${request.contextPath}/resources/image/payShareHeader.png"/>
        	</div>
            <div class="modal-body" align="center">
                <div>
                	<input type="text" class="form-control reste_input_shareInfor" style="background-color: #ff5c81;width:16rem;" id="payCode">
                    <div align="center">
                        <img width="100%" src="${request.contextPath}/resources/image/payShareBody.png"/>
                    </div>
                    <div style="margin: 5px auto;width: 165px;">
	                	<button type="submit" class="pay_submit_btn" id="btn-pay-next">下一步</button>
	                </div>
	                <p class="text-center"><img width="20%" src="${request.contextPath}/resources/image/login_small.png"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--pay&share modal end-->

<div class="container-fluid">
    <div class="row">
        <div id="template-wrapper">
			<div class="template_top">
	            <div class="template_header">
				    <#if invitationId??>
					    <!--<a href="${request.contextPath}/make/${selectedTemplate.templateId}/v12"><img style="height: 25px; width: auto" src="${request.contextPath}/resources/image/icon_upload.png"/></a>-->
					    <a href="${request.contextPath}/cards/v12"><img style="height: 25px; width: auto" src="${request.contextPath}/resources/image/icon_upload.png"/></a>
					<#else>
					    <!--<a href="${request.contextPath}/templates/v12"><img style="height: 25px; width: auto" src="${request.contextPath}/resources/image/icon_upload.png"/></a>-->
					    <a href="${request.contextPath}/cards/v12"><img style="height: 25px; width: auto" src="${request.contextPath}/resources/image/icon_upload.png"/></a>
					</#if>
	                <a href="${request.contextPath}/templates/v12"><img style="height: 25px; width: auto;display: inline-block;float: right;" src="${request.contextPath}/resources/image/icon_hoem.png"></a>
					<#if invitationId??>
						<#if isPayed??>
							<#if isPayed == 1>
								<a href="javascript:void(0)"><img id="card-share" data-toggle="modal" data-target="#share-card-model" style="margin-right:30px;height: 25px; width: auto; float: right;" src="${request.contextPath}/resources/image/icon_share2.png"></a>
							<#else>
								<a href="javascript:void(0)"><img id="card-pay" data-toggle="modal" data-target="#shareInfor" style="margin-right:15px;height: 25px; width: auto; float: right;" src="${request.contextPath}/resources/image/icon_share2.png"></a>
							</#if>
						</#if>
					</#if>
	            </div>
	            <div class="template_title">
	                <h4>${selectedTemplate.name} ${selectedTemplate.subname} </h4>
	            </div>
			</div>
            <div class="row">
                <div class="col-xs-12">
					<div class="placeholders">
					    <#if invitationId??>
			                <iframe id="preview-adyj" src="${request.contextPath}/cards/${invitationId}/v12" frameborder="0" height="100%" width="100%"> </iframe> 
						<#else>
						    <iframe id="preview-adyj" src="${request.contextPath}/templates/${selectedTemplate.templateId}/v12" frameborder="0" height="100%" width="100%"> </iframe> 
						</#if>
					</div>
				</div>
			</div>
        </div>

	    <div class="preview_foot">
	        <span class="preview_editBtn">
			    <#if invitationId??>
				    <a href="${request.contextPath}/edit/${invitationId}/v12"><img src="${request.contextPath}/resources/image/icon_edit.png"/></a>
				<#else>
				    <a href="${request.contextPath}/make/${selectedTemplate.templateId}/v12"><img src="${request.contextPath}/resources/image/icon_edit.png"/></a>
				</#if>
	        </span>
	    </div>
    </div>

</div>
<script src="${request.contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${request.contextPath}/resources/js/bootstrap.min.js"></script>
<script>

$("#preview-adyj").load(function(){
    $(this).height($(".placeholders").height());
});

$(function(){
	 var url = '${request.contextPath}/wx/getJsSDKConfig';
	   var targetUrl = window.location.href;
	    $.post(url,{'targetUrl':targetUrl},function(config){
	        if(!window.jsApiList){
	            window.jsApiList = config.jsApiList;
	        }
	         wx.config({
	              debug: false,
	              appId: config.appId,
	              timestamp: config.timestamp, 
	              nonceStr: config.nonceStr, 
	              signature: config.signature, 
	              jsApiList: window.jsApiList
	          });
	 
	        wx.error(function(res) {
	            //$.scojs_message(res.errMsg, $.scojs_message.TYPE_ERROR);
	            alert("error");
	        });
	    })
	
	 $("#okBtn").click(function(){
     	window.location.href="${request.contextPath}/cards/${invitationId}/v12";
     });

	$("#btn-pay-next").click(function(){
		var payCode = $("#payCode").val();
		if(payCode == "" || payCode == null){
			alert("请输入支付码");
			return;
		}else{
			$.ajax({  
	        type : "POST",  //提交方式  
	        url : "${request.contextPath}/cards/${invitationId}/payByCode",//路径 ,
			data : 'payCode='+$('#payCode').val(),
	        success : function(result) {//返回数据根据结果进行相应的处理  
	            if(result.status == 'success'){
	            	$('#share-card-model').modal();
	            	$('#shareInfor').modal("hide");
	            	//window.location.href="${request.contextPath}/share/${invitationId}/v12";
				}else{
					$('.template_title').trigger("click");
				    alert(result.error);
				}
	        }  
	    });
		}
	});
	
});

wx.ready(function () {
      	wx.hideOptionMenu();
	});
    
</script>
</body>
</html>